<template>
  <div class="acc-div">
    <div class="menu">
      <div class="menu-and-button-wrapper">
        <div
            style="font-family: 'Arial', sans-serif;text-align: left;font-size: 19px;font-weight: bold; margin-left: 170px">
          月预算
        </div>
        <el-button style="margin-left: calc(100% - 40px);position: absolute;color: black" type="text" size="small"
                   @click="$router.push('/index')">返回
        </el-button>
      </div>
    </div>
    <div class="content">
      <el-card>
        <el-row style="height: 20px">
          <el-col :span="20">
            <p style="margin: 0; float: left; font-family: 'Arial', sans-serif; text-align: left;font-size: 16px;">
              {{ month }}月总预算</p>
          </el-col>
          <el-col :span="4" style="text-align: right;">
            <el-button type="text" size="mini" @click="focusToZys()">编辑</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <el-progress v-if="budgetPercent > 0" type="circle" :percentage="budgetPercent" :width="70"
                         color="rgb(251, 219, 68)">
            </el-progress>
            <el-progress v-else class="process_DiyError" type="circle" :percentage="budgetPercent" text-color="red"
                         :width="70" stroke-linecap="square" :format="format">
            </el-progress>
          </el-col>
          <el-col :span="20">
            <div class="fond_diy_ys">
              <p style="font-size: 16px; font-weight: bold; float: right; margin-right: 38px">{{ monRemainBudget }}</p>
              <p style="font-size: 16px; font-weight: bold; ">剩余预算: </p>
              <el-divider></el-divider>
              <el-popover ref="popover_ys" style="float: right" trigger="focus" @after-leave="handleCancel()">
                <div>
                  <p>确定要更改总预算吗？</p>
                  <div style="text-align: right; margin: 0">
                    <el-button @click="handleCancel()" type="text" size="mini">取消</el-button>
                    <el-button @click="handleConfirm()" type="primary" size="mini">确定</el-button>
                  </div>
                </div>
                <el-input slot="reference" ref="zysRef" v-model="monBudgetItem.monBudget"
                          style="width: 90px"></el-input>
              </el-popover>
              <p>本月预算: </p>
              <el-input style="float: right;width: 90px" v-model="monBudgetItem.monAmount" readonly></el-input>
              <p>本月支出:</p>
            </div>
          </el-col>
        </el-row>
      </el-card>

    </div>
    <div style="position:absolute;bottom: 40%;margin-left: 40%">
      待开发
    </div>
  </div>
</template>

<script>
import accountApi from "@/api/accountApi";
import {validateAmount} from "@/utils/common.js";

let userId = window.localStorage.getItem("userId");
export default {
  name: 'budgetMainView',
  data() {
    return {
      month: new Date().getMonth() + 1,
      monBudgetItem: {
        monBudget: 0,
        monAmount: 0
      },
      curMonBudget: ''
    };
  },
  created() {
    this.init()
  },
  watch: {
    'curMonBudget': function (val) {
      this.monBudgetItem.monBudget = val
    }
  },
  computed: {
    monRemainBudget() {
      const remainBudget = this.monBudgetItem.monBudget - this.monBudgetItem.monAmount
      return remainBudget.toFixed(2) || 0
    },
    budgetPercent() {
      if (!this.monBudgetItem.monBudget) {
        return 0;
      }
      const budget = parseFloat(this.monBudgetItem.monBudget);
      const expenditure = parseFloat(this.monBudgetItem.monAmount);
      let percentage = ((budget - expenditure) / budget) * 100;
      percentage = percentage.toFixed(2) || 0
      return percentage < 0 ? 0 : percentage
    },

  },
  methods: {
    init() {
      this.queryMonBudget()
    },
    queryMonBudget() {
      const param = {
        userId: userId,
        month: this.month, //获取当前月份(0-11,0代表1月)
      }
      accountApi.queryMonBudget(param).then(res => {
        if (res.data.code === 200) {
          this.monBudgetItem = res.data.data
          this.monBudgetItem.monBudget = this.monBudgetItem.monBudget || 0
          this.curMonBudget = this.monBudgetItem.monBudget || 0
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    focusToZys() {
      this.$refs.zysRef.focus()
    },
    handleConfirm() {
      const refTmp = 'popover_ys'
      if (!validateAmount(this.monBudgetItem.monBudget)) {
        this.$message.error('请输入合法的金额')
        this.monBudgetItem.monBudget = this.curMonBudget
        this.$refs[refTmp].doClose()
        return
      }
      const param = {
        userId: userId,
        month: this.month, //获取当前月份(0-11,0代表1月)
        monBudget: this.monBudgetItem.monBudget
      }
      accountApi.updateMonBudget(param).then((res) => {
        if (res.data.code == 200) {
          this.curMonBudget = this.monBudgetItem.monBudget
          this.$message.success('保存成功')
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(() => {
        this.$message.error('系统异常')
      }).finally(() => {
        this.$refs[refTmp].doClose()
      })
    },
    handleCancel() {
      const refTmp = 'popover_ys'
      this.monBudgetItem.monBudget = this.curMonBudget
      this.$refs[refTmp].doClose()
    },
    format() {
      return '已超支'
    }

  }
};
</script>
<style scoped lang="scss">
.menu {
  width: 100%;
  background-color: rgb(251, 219, 68);
  height: 70px;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  text-align: center;
  position: fixed;
  display: flex;
  justify-content: center; /* 居中子元素 */
  align-items: center; /* 垂直居中（如果需要的话） */
}


.menu-and-button-wrapper {
  width: 100%;
  display: flex;
  align-items: center; /* 垂直居中（如果需要的话） */

}

.content {
  flex: 1;
  overflow-y: auto;
  padding-top: 80px; /* 留出头部的高度 */
  padding-bottom: 70px;
}

::v-deep .el-card__body {
  padding: 10px;
}

.textDiy_ys {
  font-size: 12px;
}

::v-deep .el-divider--horizontal {
  margin: 5px 0;
}

.fond_diy_ys {
  margin-left: 40px;
  font-family: 'Arial', sans-serif;
  text-align: left;
  font-size: 14px;
  ::v-deep .el-input:first-child {
    margin-left: 5px;
    .el-input__inner {
      border: none;
      height: 18px;
    }

    .el-input__inner:focus {
      border: 1px solid #f6c134;
    }
  }

  ::v-deep .el-input:not(:first-child) {
    margin-left: 5px;
    .el-input__inner {
      border: none;
      height: 18px;
    }
  }
}

::v-deep(.el-progress__text) {
  font-family: 'Arial', sans-serif;
  font-size: 13px !important;
}

.process_DiyError {
  ::v-deep(.el-progress__text) {
    color: red !important;
    font-family: 'Arial', sans-serif;
    font-size: 13px !important;
  }
}


</style>
